
<div class="layui-fluid" style="padding: 15px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    用户信息
                </div>
                <div class="layui-card-body">
                    <table id="user" lay-filter="testUser"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    角色信息
                </div>
                <div class="layui-card-body">
                    <table id="role" lay-filter="testOrle"></table>
                </div>
            </div>
        </div>
    </div>

</div>
<!--头部工具栏-->
<script type="text/html" id="toolbarUser">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="addUser">添加用户</button>
    </div>
</script>
<!--角色工具栏-->
<script type="text/html" id="toolbarRole">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="addRole">添加角色</button>
    </div>
</script>
<!--右边工具栏-->
<script type="text/html" id="barDemoUser">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--右边工具栏-->
<script type="text/html" id="barDemoRole">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use('table', function(){
        var  $ = layui.$
            ,table = layui.table;
        //用于显示添加还是修改的
        var show=""

        //用户表格
        table.render({
            elem: '#user'
            ,height: 500
            ,url: '../../TmsUserList' //数据接口
            ,toolbar: '#toolbarUser' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_user'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'tmsId', title: 'ID', sort: true}
                ,{field: 'tmsName', title: '用户姓名'}
                ,{field: 'account', title: '用户账号'}
                ,{field: 'phonenumber', title: '用户电话'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemoUser'}
            ]]
        });
        //角色表格
        table.render({
            elem: '#role'
            ,height: 500
            ,url: '../../RoleList' //数据接口
            ,toolbar: '#toolbarRole' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_role'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'roleId', title: 'ID', sort: true}
                ,{field: 'rolename', title: '角色姓名'}
                ,{field: 'roledescribe', title: '角色描述'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemoRole'}
            ]]
        });
        //用户头部工具栏头工具栏事件
        table.on('toolbar(testUser)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'addUser':

                    show="添加"
                    //添加用户信息
                    //iframe层
                    layer.open({
                        type: 2,
                        title: show+'用户信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['500px', '90%'],
                        content: '/src/views/jurisdiction/iframe/addUser.html' //iframe的url
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_user':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //角色头部工具栏头工具栏事件
        table.on('toolbar(testOrle)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'addRole':
                    //添加用户信息
                    show="添加"
                    //iframe层
                    layer.open({
                        type: 2,
                        title: show+'角色',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['500px', '90%'],
                        content: '/src/views/jurisdiction/iframe/addRole.html' //iframe的url
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_user':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听用户行工具事件
        table.on('tool(testUser)', function(obj){
            var data = obj.data;
            /*删除*/
            if(obj.event === 'del'){
                $.ajax({
                    type: "POST",
                    url:  '../../menuAction/delUser.action?userId='+data.userid,
                    dataType: "text",
                    success: function(data){
                        table.reload('user');
                        layer.msg(data+',...');
                    }
                });
            } else if(obj.event === 'edit'){
                //修改用户信息
                show="修改"
                //iframe层
                layer.open({
                    type: 2,
                    title: show+'用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['500px', '90%'],
                    content: '/src/views/jurisdiction/iframe/addUser.html' //iframe的url
                    ,success: function(layero, index){
                        setTimeout(function() {//设置定时器
                            var body = layer.getChildFrame('body', index); // body.html() body里面的内容
                            $.ajax({
                                type:"post",
                                url: './../UpdateUser?tmsId='+data.tmsId,
                                dataType:"json",
                                success: function(data){
                                    body.find("#tmsName").val(data.tmsName); // 方式一
                                    body.find("#tmsPassword").val(data.tmsPassword); // 方式一
                                    body.find("#account").val(data.account); // 方式一
                                    body.find("#phonenumber").val(data.phonenumber); // 方式一
                                    body.find("#genre").val("修改"); // 方式一
                                    body.find("#tmsId").val(data.tmsId); // 方式一
                                    for (var i=0;i<data.roleids.length;i++){
                                        body.find("#"+data.roleids[i]).attr("checked", true);
                                    }
                                }
                            });
                        },500);
                    }
                });
                //修改
            }
        });
        //监听用户行工具事件
        table.on('tool(testOrle)', function(obj){
            var data = obj.data;
            console.log(obj)
            /*删除*/
            if(obj.event === 'del'){
                alert("删除的id:"+data.roleId)
                $.ajax({
                    type: "POST",
                    url:  '../../DelRole?roleId='+data.roleId,
                    dataType: "text",
                    success: function(data){
                        table.reload('role');
                        layer.msg(data+',...');
                    }
                });
            } else if(obj.event === 'edit'){
                //修改用户信息
                show="修改"
                //iframe层
                layer.open({
                    type: 2,
                    title: show+'角色',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['500px', '90%'],
                    content: '/src/views/jurisdiction/iframe/addRole.html' //iframe的url
                    ,success: function(layero, index){
                        setTimeout(function() {//设置定时器
                            var body = layer.getChildFrame('body', index); // body.html() body里面的内容
                            $.ajax({
                                type:"post",
                                url: '../../ShowUpdateRole?roleId='+data.roleId,
                                dataType:"json",
                                success: function(data){
                                    body.find("#rolename").val(data.rolename); // 添加姓名
                                    body.find("#roledescribe").val(data.roledescribe); // 角色描述
                                    body.find("#genre").val("修改"); // 方式一
                                    body.find("#roleId").val(data.roleId); //id
                                }
                            });
                        },500);
                    }
                });
            }
        });

    });
</script>
